<template>
  <div class="search-card">
    <h1 class="main-title">
      <span style="color: orange">透</span>古通今
      <span style="color: orange">策</span>无遗算
    </h1>
    <div class="search-input">
      <div class="change-type-card">
        <template v-for="item in searchTypes" :key="item">
          <div
            v-if="!item.url"
            class="type-item"
            :class="currSearchType === item.key ? 'active' : ''"
            @click="changeSearchType(item.key, fieldEl)"
          >
            {{ item.label }}
          </div>
          <div v-else class="type-item">
            <a :href="jumpUrl" target="_blank">
              {{ item.label }}
            </a>
          </div>
        </template>
      </div>
      <div class="flex items-center">
        <el-input
          v-model="searchForm.keyword"
          @change="changeKeyword"
          @keyup.enter="query"
          placeholder="请输入关键词进行检索"
          class="input-with-select"
          clearable
        >
          <template #append>
            <div class="search-btn" @click="query">
              <el-icon><Search /></el-icon>
              <div class="btn-txt">搜索</div>
            </div>
          </template>
        </el-input>
        <div class="more-filter">
          <span
            class="btn"
            :class="superSearchStatus ? 'active-btn' : ''"
            @click="superSearchStatus = !superSearchStatus"
          >
            筛选<el-icon class="ml-2"><ArrowDown v-if="!superSearchStatus" /><ArrowUp v-else /></el-icon>
          </span>
        </div>
      </div>
    </div>
    <Transition name="slide-up" mode="out-in">
      <div class="bg-white p-3 rounded-xl" v-show="superSearchStatus">
        <filterFields
          :config="currSearchConfig"
          :searchType="currSearchType"
          @formChange="changeQueryParams"
          ref="fieldEl"
        />
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits,watch,provide } from "vue";
import { Search, RefreshRight,ArrowDown,ArrowUp
 } from "@element-plus/icons-vue";
import filterFields from "../../../../components/filterFields/index.vue";
import { useSearchStore } from "../../../../store/search";

const {changeStateSearchValue} = useSearchStore();
import { useSearchHooks } from "./hooks";
const jumpUrl = `${location.origin}/matching`;

const fieldEl = ref(null);
const emits = defineEmits([
  "changeList",
  "resetPageInfo",
  "query",
  "resetFilter"
]);

const {
  currSearchConfig,
  searchForm,
  searchTypes,
  currSearchType,
  changeSearchType,
  superSearchStatus,
  query,
  changeQueryParams,
} = useSearchHooks(emits);
console.log(searchForm.value.keyword,'输入框')

const changeKeyword = (val)=>{
  changeStateSearchValue(val)
}
</script>

<style scoped lang="postcss">
.search-card {
  @apply py-3 rounded-md pb-0;
  /* min-height: 340px; */
  .main-title {
    @apply text-center text-white font-normal;
    font-size: 40px;
    margin-top: 80px;
    margin-bottom: 30px;
    text-shadow: 0.1em 0.1em 0.05em #333
  }
  .search-input {
    @apply mb-6 w-2/3 mx-auto;
    .change-type-card {
      @apply flex justify-center mb-4;
    }
    .type-item {
      @apply px-4 py-1 mr-10 cursor-pointer text-white relative;
      font-size: 16px;
      &:hover {
        @apply bg-white text-theme-color;
        &:after {
          content: "";
          position: absolute;
          bottom: -6px;
          left: 50%;
          margin-left: -6px;
          width: 0;
          height: 0;
          border-width: 6px 6px 0px;
          border-style: solid;
          border-color: #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
        }
      }
      &:last-child {
        @apply mr-0;
      }
    }

    .active {
      @apply bg-white text-theme-color;
      &:after {
        content: "";
        position: absolute;
        bottom: -6px;
        left: 50%;
        margin-left: -6px;
        width: 0;
        height: 0;
        border-width: 6px 6px 0px;
        border-style: solid;
        border-color: #fff rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
      }
    }
  }
  .input-with-select {
    @apply flex-1;
    height: 50px;
  }
  .search-btn {
    @apply flex cursor-pointer;
    cursor: pointer;
    align-items: center;
    .btn-txt {
      margin-left: 6px;
    }
  }

  .more-filter {
    @apply flex  ml-3 rounded-md;
    height: 50px;
    background: orange;
    .btn {
      @apply flex items-center justify-center cursor-pointer rounded-md;
      background-color: #ffffff20;
      width:88px;
      color: #ffffffce;
      text-align:center;
      &:hover {
        color: white;
        background-color: #ffffff4a;
      }
    }
    .active-btn {
      color: white;
      background-color: #ffffff4a;
    }
  }
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.35s ease-out;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(-50px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-50px);
}
</style>
